{include file="Public:header" /}

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>用户组列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="">
                            <a class="btn btn-primary" aria-controls="messages" role="button" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus"></span> 添加用户组</a>
                        </div>
                        <br/>
                        <div class="table-responsive">
					          <table class="table table-bordered table-hover">
						        <thead>
						          <tr style="background: #f9f9f9;">
						            <th height="40">用户组名</th>
						            <th>操作</th>
						          </tr>
						        </thead>
						        <tbody>
						          {foreach name="data" item="data"}
						            <tr class="gradeX">
						                <td>{$data['title']}</td>
						                <td class="center" style="text-align:left;">
					                         <div class="dropdown">
								                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 操作   <span class="caret"></span></button>
								                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								                  <li><a role="button" class="btn btn-primary" style="margin-bottom: 0px;"  href="__URL__/ruleGroup?id={$data['id']}"><span class="fa fa-plus"></span> 分配权限</a></li>
								                  <li><a role="button" class="btn btn-primary" style="margin-bottom: 0px;" group_id="{$data['id']}" group_title="{$data['title']}" onclick="editGroup(this)" href="#"><span class="fa fa-edit"></span> 修改</a></li>
								                  <li><a role="button" class="btn btn-danger" style="margin-bottom: 0px;" onclick="deleteUserGroup(this,{$data['id']})" href="#"><span class="fa fa-trash-o"></span> 删除</a></li>
								                </ul>
								              </div>
						                </td>
						            </tr>
						           {/foreach}
						        </tbody>
					     	 </table>
     					 </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加用户组</h4>
      </div>
      <div class="modal-body">
        <form action="__URL__/addUserGroup" method="post" id="defaultForm">
          <div class="form-group">
            <label for="exampleInputMenuName">用户组名 </label>
            <input type="text" style="border-radius: 4px;" class="form-control" id="exampleInputMenuName" name="title">
          </div>
          
	      <div class="modal-footer" id="parent_id">
	        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
	        <button type="submit"  class="btn btn-primary">提交</button>
	      </div>
	      </form>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->

{include file="Public:footer" /}
 
<script>
$(document).ready(function() {
    /**
     * 下面是进行插件初始化
     * 你只需传入相应的键值对
     * */
    $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
            	  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                  validating: 'glyphicon glyphicon-refresh'
            },
            fields: {/*验证*/
            	title: {/*键名username和input name值对应*/
                    message: '用户组名验证失败',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '用户组名不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 4,
                            max: 30,
                            message: '用户组名长度必须在4到30之间'
                        }/*最后一个没有逗号*/
                    }
                }
            }
        });
});

//修改菜单
function editGroup(obj){
	var group_id = $(obj).attr('group_id');
	var group_title = $(obj).attr('group_title');
	$('#myModal').modal('show');
	$("#defaultForm").attr('action','__URL__/editUserGroup?id='+group_id);
	$("input[name='title']").val(group_title);
}

//删除
function deleteUserGroup(obj,id){
	layer.confirm('确定要删除数据吗',{btn:['确认','取消'], icon:3, closeBtn: 2 },function(index){
		$.ajax({
			url : '__URL__/deleteUserGroup',
			data : {'id':id},
			type : 'get',
			dataType : 'json',
			async : false,   //取消同步，执行完之后再往下执行
			success : function(data){
				if(data.status == 1){				
					layer.msg(''+data.message+'',{icon:1,time:1000});
					$(obj).parent('li').parent('ul').parent('div').parent('td').parent('tr').remove();
				}else if(data.status == 2){
					layer.msg(''+data.message+'',{icon:2,time:1000});
				}
			}
		});
	});	
}
</script>
</body>
</html>
